import ToolBase from '@/core/tools/base'
import ImageSelect from '@/assets/images/tools/select.svg'
import { ToolName } from '../public'
import toolSlice, { SerializableToolObject } from '@/reducers/toolSlice'
import { AppDispatch } from '@/store'
import { Radio } from 'antd';
import { useState } from 'react'
import { RadioChangeEvent } from 'antd/lib'
import { Micon } from '@/assets/iconfont'

export default class ToolSelect extends ToolBase {
  static ToolItem: React.FC<SerializableToolObject> = (item) => {
    return <>
      <a className='tool-button'>
        <div className='tool-button-icon'>
          <Micon type='micon-select' style={{ fontSize: 22 }}></Micon>
        </div>
        <div className='tool-button-label'>{ item.label }</div>
      </a>
    </>
  }

  static Params:  React.FC = () => {
    const radioOptions = [
      { label: 'Apple', value: 'Apple' },
      { label: 'Pear', value: 'Pear' },
      { label: 'Orange', value: 'Orange', title: 'Orange' },
    ];
    const [value3, setValue3] = useState('Apple');


    const onChange3 = ({ target: { value } }: RadioChangeEvent) => {
      setValue3(value);
    };
    
    return <>
      <Radio.Group options={radioOptions} onChange={onChange3} value={value3} optionType="button" />
    </>
  }

  name: ToolName = 'select'
  label = '选择工具'
  description = '快捷键[....]'

  constructor(){
    super()
  }

  serialize(){
    return {
      name: this.name,
      label: this.label,
      description: this.description,
    }
  }

  onActive(dispatch: AppDispatch){
    dispatch(toolSlice.actions.activate(this.name))
    console.log('active Tools [move]')
    
  }

  onInActive(dispatch: AppDispatch){
    console.log('inactive Tools [move]')
    this.unsubscribe()
  }

}